<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue中多个组件的过渡</title>
    <script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="root">
<!--    采用动态组件的形式修改样式-->
<!--    out-in : 要隐藏的元素先隐藏，要出现的元素后出现-->
    <transition name="fade" mode="out-in">
        <component :is="type"></component>
    </transition>
    <button @click="handleClick">切换</button>
</div>
<script type="text/javascript">
    Vue.component('child',{
        template:'<div>child</div>'
    })
    Vue.component('child-one',{
        template:'<div>child-one</div>'
    })
    var vm = new Vue({
        el: "#root",
        data: {
            type: 'child'
        },
        methods: {
            handleClick: function () {
                this.type = this.type === 'child' ? 'child-one' : 'child'
            }
        },
    });
</script>
<style type="text/css">
    /*显示时：第一帧存在，第二帧移除，默认是.v-enter，与上面 name="fade" 保持一致*/
    .fade-enter,.fade-leave-to {
        opacity: 0;
    }

    /*显示时：第二帧出现，整个生命周期都存在，监听 transition 的变化*/
    .fade-enter-active,.fade-leave-active {
        transition: opacity 1s;
    }

</style>
</body>
</html>
